<%@ page import="java.util.List" %>
<%@ page import="com.luna.beans.Book" %>
<%@ page import="com.luna.service.BookService" %>
<%@ page import="com.luna.serviceImpl.BookServiceImpl" %>
<%@ page import="com.luna.service.MessageService" %>
<%@ page import="com.luna.serviceImpl.MessageServiceImpl" %>
<%@ page import="com.luna.beans.Message" %>
<%@ page import="com.luna.beans.User" %>
<%@ page import="com.luna.beans.ShowMessage" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%
  BookService bookService = new BookServiceImpl();
  List<Book> bookList = bookService.bookList();
  request.setAttribute("bookList", bookList);

  if (request.getSession().getAttribute("user") != null) {
    MessageService messageService = new MessageServiceImpl();
    List<ShowMessage> messageList = messageService.msgList(((User) request.getSession().getAttribute("user")).getId());
    request.setAttribute("messageList", messageList);
  }
%>

<html>
  <head>
    <title>Main Page</title>
    <link rel="stylesheet" href="static/dist/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="static/css/base.css"/>
    <script type="text/javascript" src="static/js/jquery-3.7.0.min.js"></script>
    <script type="text/javascript" src="static/dist/js/bootstrap.js"></script>
    <style>
        a:hover {
            color: black;
            text-decoration: none;
        }
        @keyframes loop {
          0% {
            transform: translateX(500px);
            -webkit-transform: translateX(500px);
          }
          100% {
            transform: translateX(-100%);
            -webkit-transform: translateX(-100%);
          }
        }
        @-webkit-keyframes loop {
          0% {
            transform: translateX(500px);
            -webkit-transform: translateX(500px);
          }
          100% {
            transform: translateX(-100%);
            -webkit-transform: translateX(-100%);
          }
        }
        .scroll-bar {
          width: 500px;
          margin: 10px auto;
          overflow: hidden;
          background-color: #ffffff;
          border-radius: 5px;
          padding: 5px;
        }
        .roll {
          white-space: nowrap;
          animation: 10s loop linear infinite normal;
          display: inherit;
        }
        .my-dropdown {
          position: relative;
          display: inline-block;
        }
        .my-dropdown-content {
          display: none;
          position: absolute;
          background-color: #f9f9f9;
          min-width: 300px;
          box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
          padding: 12px 16px;
          transform: translateY(16px);
          z-index: 1;
          color: black;
        }
        .my-dropdown:hover .my-dropdown-content {
          display: block;
        }
        .addition-button-area {
          margin-bottom: 10px;
        }
    </style>
    <script>
      const base_href = window.location.href.slice(0, window.location.href.lastIndexOf('/'))
      function book_link() {
          $('.book-link').click(function () {
            console.log($(this).attr("uid"))
            window.location.href = base_href + '/RedirectToBookInfo?book_id=' + $(this).attr("uid")
          })
      }
    </script>
    <script>
      window.onload = () => {
          book_link()
      }
      const toHome = () => {
        window.location.href = base_href + '/'
      }
      const toLogin = () => {
        window.location.href = base_href + '/login.jsp'
      }
      const toRegister = () => {
        window.location.href = base_href + '/register.jsp'
      }
      const logout = () => {
        window.location.href = base_href + '/LogoutServlet'
      }
      const addBook = () => {
        $.ajax({
            url: base_href + '/BookAddition',
            type: 'POST',
            data: $('#book-addition-form').serialize()
        }).then(() => {
            location.reload()
        })
      }
      const removeMessage = () => {
        <%--console.log('${sessionScope.user.getId()}')--%>
        $.ajax({
          url: base_href + '/ReadMessages?user_id=' + '${sessionScope.user.getId()}',
          type: 'GET',
          success: function (data) {
            location.reload()
          }
        })
      }
    </script>
  </head>
  <body>
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" onclick="toHome()" style="cursor: pointer;">图书笔记管理系统</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9">
          <ul class="nav navbar-nav">
            <li class="active"><a onclick="toHome()" style="cursor: pointer;">首页</a></li>
          </ul>
          <p class="nav navbar-nav scroll-bar">
            <span class="roll">欢迎来到图书笔记管理系统</span>
          </p>
          <ul class="nav navbar-nav navbar-right">
            <c:if test="${sessionScope.user != null}">
              <li class="my-dropdown"><a>
                <div>
                  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                  <c:choose>
                    <c:when test="${messageList.size() != 0}">
                      您有新消息
                    </c:when>
                    <c:otherwise>
                      您没有新消息
                    </c:otherwise>
                  </c:choose>
                </div>
                <div class="my-dropdown-content">
                  <ul class="list-group">
                      <%--                  <li class="list-group-item" style="font-size: 5px;">用户xx在您的书籍xx下添加了评论</li>--%>
                    <c:forEach items="${messageList}" var="item">
                      <li class="list-group-item" style="font-size: 5px;">您分享发布的书籍《${item.book}》下有新笔记！</li>
                    </c:forEach>
                  </ul>
                  <div style="text-align: center">
                    <button class="btn btn-default btn-xs" onclick="removeMessage()">已读全部</button>
                  </div>
                </div>
              </a></li>
            </c:if>

            <c:choose>
              <c:when test="${sessionScope.user != null}">
                <li><a>欢迎，${sessionScope.user.getNickname()}！</a></li>
                <li><a style="cursor: pointer" onclick="logout()">退出登录</a></li>
              </c:when>
              <c:otherwise>
                <li><a href="login.jsp">登录</a></li>
                <li><a href="register.jsp">注册</a></li>
              </c:otherwise>
            </c:choose>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

    <div class="container">
      <div style="margin-top: 80px;">
        <c:if test="${sessionScope.user != null}">
          <div class="addition-button-area">
            <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">添加图书</button>
          </div>
        </c:if>
        <div class="panel panel-primary">
          <div class="panel-heading">
            <h3 class="panel-title">所有图书</h3>
          </div>
          <div class="panel-body">
            <c:forEach items="${bookList}" var="item" varStatus="status">
              <c:if test="${status.index == 0}">
                <div class="row" style="width: 100%">
              </c:if>
              <c:if test="${status.index % 4 == 0 && status.index != 0 && status.index != bookList.size() - 1}">
                </div>
                <div class="row" style="width: 100%">
              </c:if>
              <div class="col-lg-3">
                <div style="width: 100%; height: auto; cursor: pointer;" class="book-link" uid="${item.id}">
                  <div style="width: 100%;">
                    <img src="static/img/R-C.jfif" style="width: 100%; height: auto"/>
                  </div>
                  <div style="text-align: center;">
<%--                    <a class="book-link" style="text-decoration: none; color: black; cursor: pointer;" uid="${item.id}">${item.name}</a>--%>
                    <p>${item.name}</p>
                  </div>
                </div>
              </div>
              <c:if test="${status.index == bookList.size() - 1}">
                </div>
              </c:if>
            </c:forEach>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Add Book Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">添加书本</h4>
          </div>
          <div class="modal-body">
            <form id="book-addition-form">
              <div class="row">
                <div class="col-sm-2" style="line-height: 100%; text-align: center;">
                  <label>书名：</label>
                </div>
                <div class="col-lg-10">
                  <input class="form-control" type="text" name="book-name"/>
                </div>
              </div>
              <div class="row" style="margin-top: 10px;">
                <div class="col-sm-2" style="line-height: 100%; text-align: center;">
                  <label>作者：</label>
                </div>
                <div class="col-lg-10">
                  <input class="form-control" type="text" name="author-name"/>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" onclick="addBook()">Save changes</button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
